<template>
    <Layout style="height: 100%" class="main">
        <Sider v-show="!isPhone&&showMenu" ref="side1" hide-trigger collapsible :collapsed-width="64" v-model="collapsed"
            width="256px" >
            <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed"   :theme="theme"
                @on-select="turnToPage" :menu-list="menuList">
                <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
                <div class="logo-con"  > 
                    <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
                    <img v-show="collapsed" :src="minLogo" key="min-logo" />
                </div>
            </side-menu>
        </Sider>

        <Drawer v-show="isPhone&&showMenu" placement="left" :closable="false"  v-model="collapsed" class="phone-drawer">
            <Sider ref="side1" hide-trigger v-model="collapsed" width="256px"  
                :style="{'box-shadow': isPhone?'none':''}">
                <side-menu accordion ref="sideMenu" :active-name="$route.name" @on-select="turnToPage"   :theme="theme"
                    :menu-list="menuList">
                    <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
                    <div class="logo-con"  >
                        <img :src="maxLogo" key="max-logo" />
                    </div>
                </side-menu>
            </Sider>
        </Drawer>



        
        <Layout>
            <Header class="layout-header-bar">
                <header-bar :collapsed="collapsed" :is-phone="isPhone" :show-menu="showMenu" @on-coll-change="handleCollapsedChange"
                    @on-refresh="handleRefresh">
                    <user :userName="userName"></user>
                    <fullscreen v-model="isFullscreen" v-if="!isPhone" />
                </header-bar>
            </Header>
            <Content class="main-content-con">
                <Layout class="main-layout-con">
                    <div class="tag-nav-wrapper" v-show="showMenu">
                        <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
                    </div>
                    <Content class="content-wrapper">
                        <keep-alive :include="cacheList">
                            <router-view v-if="isRouterAlive" />
                        </keep-alive>
                    </Content>
                </Layout>
            </Content>
        </Layout>
    </Layout>
</template>
<script>
    import headerBar from "./components/header-bar"
    import fullscreen from './components/fullscreen/fullscreen'
    import TagsNav from './components/tags-nav'
    import SideMenu from './components/side-menu'
    import User from './components/user'
    import minLogo from '../../assets/images/logo-min.png'
    import maxLogo from '../../assets/images/logo.png'
    import './main.less'
    import {
        mapMutations,
        mapActions,
        mapGetters
    } from 'vuex'
    import {
        getNewTagList,
        getNextRoute,
        routeEqual,
        localRead
    } from '@/libs/util'
    export default {
        components: {
            headerBar,
            fullscreen,
            TagsNav,
            User,
            SideMenu
        },
        data() {
            return {
                collapsed: false,
                isFullscreen: false,
                isRouterAlive: true,
                theme: 'dark',
                isPhone: false,
                minLogo,
                maxLogo,
                stylesDark: {
                    padding: '0',
                    width: '100%',
                    background: '#191A23'
                },
                stylesLight: {
                    padding: '0',
                    width: '100%',
                    background: '#fff'
                },
            };
        },
        provide() {
            return {
                reload: this.handleRefresh
            }
        },
        computed: {
            ...mapGetters([

            ]),
            showMenu(){//是否显示侧边栏和标签页
                return this.$store.state.app.showMenu;
            },
            tagNavList() {
                return this.$store.state.app.tagNavList
            },
            tagRouter() {
                return this.$store.state.app.tagRouter
            },
            rotateIcon() {
                return ["menu-icon", this.collapsed ? "rotate-icon" : ""];
            },
            userAvator() {
                return this.$store.state.user.avatorImgPath
            },
            cacheList() {
                return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(
                    item =>
                    item.name) : []
            },
            menuList() {
                return this.$store.getters.menuList
            },
            userName() {
                if (localRead("ls-health-devops-web")) {
                    return JSON.parse(localRead("ls-health-devops-web")).realname;
                } else {
                    return ''
                }
                // return this.$store.state.user.userInfo.realname;
            },
        },
        mounted() {
            var innerWidth = window.innerWidth;
            if (innerWidth <= 600) { //手机
                if (!this.isPhone) this.isPhone = true;
            } else if (innerWidth > 600 && innerWidth <= 960) { //平板
                if (!this.collapsed) this.collapsed = true;
                if (this.isPhone) this.isPhone = false;
            } else { //PC
                if (this.collapsed) this.collapsed = false;
                if (this.isPhone) this.isPhone = false;
            }

            this.setIsPhone(this.isPhone);

            window.addEventListener('resize', res => {
                var innerWidth = window.innerWidth;
                if (innerWidth <= 600) { //手机
                    if (!this.isPhone) this.isPhone = true;
                } else if (innerWidth > 600 && innerWidth <= 960) { //平板
                    if (!this.collapsed) this.collapsed = true;
                    if (this.isPhone) this.isPhone = false;
                } else { //PC
                    if (this.collapsed) this.collapsed = false;
                    if (this.isPhone) this.isPhone = false;
                }
                this.setIsPhone(this.isPhone);
            })

            /**
             * @description 初始化设置面包屑导航和标签导航
             */
            this.setTagNavList()
            this.addTag({
                route: this.$store.state.app.homeRoute
            })
            this.setBreadCrumb(this.$route)
            // 如果当前打开页面不在标签栏中，跳到homeName页
            if (!this.tagNavList.find(item => item.name === this.$route.name)) {
                this.$router.push({
                    name: this.$config.homeName
                })
            }
        },
       
        watch: {
            '$route'(newRoute) {
                const {
                    name,
                    query,
                    params,
                    meta
                } = newRoute
                this.addTag({
                    route: {
                        name,
                        query,
                        params,
                        meta
                    },
                    type: 'push'
                })
                if (this.isPhone) this.collapsed = false;
                this.setBreadCrumb(newRoute)
                this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
                this.$refs.sideMenu.updateOpenName(newRoute.name)
            }
        },
        methods: {
            ...mapMutations([
                'setBreadCrumb',
                'setTagNavList',
                'addTag',
                'setIsPhone'
            ]),
            ...mapActions([
                'handleLogin'
            ]),
            turnToPage(route) {
                let {
                    name,
                    params,
                    query
                } = {}
                if (typeof route === 'string') name = route
                else {
                    name = route.name
                    params = route.params
                    query = route.query
                }
                this.$router.push({
                    name,
                    params,
                    query
                })
            },
            handleRefresh() {

                this.isRouterAlive = false;
                this.$nextTick(() => {
                    this.isRouterAlive = true;
                })
            },
            handleCloseTag(res, type, route) {
                if (type === 'all') {
                    this.turnToPage(this.$config.homeName)
                } else if (routeEqual(this.$route, route)) {
                    if (type !== 'others') {
                        const nextRoute = getNextRoute(this.tagNavList, route)
                        this.$router.push(nextRoute)
                    }
                }
                this.setTagNavList(res)
            },
            handleClick(item) {
                this.turnToPage(item)
            },
            handleCollapsedChange(state) {
                this.collapsed = state;
            },
        }
    };
</script>